<template>
  <div class="Registration">

    <el-dialog  @close="closeRegistration"
                v-if="dialogVisible"
                :modal-append-to-body="false"
               :append-to-body="false" width="400px"
               :visible.sync="isRegistration">
      <el-tabs stretch v-model="activeName">
        <el-tab-pane stretch label="普通注册" name="first">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <el-form-item label="账号" prop="loginName">
              <el-input clearable v-model="ruleForm.loginName"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input clearable show-password v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item show-password label="确认密码" prop="password2">
              <el-input clearable v-model="ruleForm.password2"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
              <el-input clearable v-model="ruleForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="电话号" prop="mobile">
              <el-input clearable v-model="ruleForm.mobile"></el-input>
            </el-form-item>

            <el-form-item label="验证码" prop="code">
              <el-input clearable v-model="ruleForm.code" placeholder="请输入验证码" class="verificationCode"></el-input>
              <el-button type="success" class="succes" v-show="show" @click.prevent="getode()">验证码</el-button>
              <el-button type="success" class="succes" v-show="!show">{{ count }}</el-button>
            </el-form-item>

            <el-form-item>
              <el-button :plain="true" type="primary" @click="submitForm" class="loginBtn">注册</el-button>
            </el-form-item>
            <div class="btn">
              <span @click="loginGo">去登录</span>
            </div>
          </el-form>

        </el-tab-pane>

      </el-tabs>
      <Login />
    </el-dialog>


  </div>
</template>

<script>


import {getNewRegistered, getRegistration} from "@/api/user-api";

export default {
  name: "Registration",
  components: {},
  props: {
    isRegistration: Boolean
  },
  data() {
    return {
      dialogVisible: true,
      activeName: 'first',
      show: true,
      count: '',
      //注册信息
      ruleForm: {
        loginName: '',
        password: '',
        password2: '',
        nickname: '',
        mobile: '',
        code: '',
      },
      rules: {
        loginName: [
          {required: true, message: '请输入(4-16位数字字母)用户名', trigger: 'blur'},
          {pattern: /^[a-zA-Z0-9]{4,16}$/, message: '请输入(4-16位数字字母)用户名'}
        ],
        password: [
          {required: true, message: '请输入(4-16位数字字母)密码', trigger: 'blur'},
          {pattern: /^[a-zA-Z0-9]{4,16}$/, message: '请输入(4-16位数字字母)密码'}
        ],
        mobile: [
          {required: true, message: '目前只支持11位手机号码', trigger: 'blur'},
          {pattern: /^1[34578]\d{9}$/, message: '目前只支持11位手机号码'}
        ],
        code:
          [
            {required: true, message: '目前只支持6位验证码', trigger: 'blur'},
            {pattern: /^\d{6}$/, message: '目前只支持6位验证码'}
          ],

      },
    }
  },
  methods: {
    //去登陆
    loginGo(){
      // this.isRegistration=false
      this.$emit("makeLoginShow",{
        isRegistration:false,
        isShow:true
      })
    },
    //tab切换
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //注册
    submitForm() {
      getNewRegistered(this.ruleForm.loginName, this.ruleForm.code, this.ruleForm.mobile, this.ruleForm.password, this.ruleForm.nickname).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.$message({
            showClose: true,
            message: '恭喜你，注册成功',
            type: 'success'
          });

        }else{
          this.$message({
            showClose: true,
            message: '注册失败哈,请重新输入的信息哦',
            type: 'error'
          });
        }
      })
    },
    //验证码
    getode() {
      getRegistration(this.ruleForm.mobile).then(res => {
        console.log(res)

      })
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {

          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    },
    //子传父
    closeRegistration(){
      this.$emit('closeRegistration',false)
    }
  },
}
</script>

<style scoped lang="less">
//去掉顶部padding
/deep/ .el-dialog__header {
  padding: 0;
}

//input第一个下边距
.input {
  margin-bottom: 10px;
}

//
/deep/ .el-dialog {
  width: 42%;
  //height: 42%;
}

//确定
/deep/ .loginBtn {
  text-align: center;
  width: 260px;
  margin-top: 5px;
  background-color: #00cf8c;
}

//验证码的宽
/deep/ .verificationCode {
  width: 60%;

}

//去掉顶部padding
/deep/ .el-dialog__header {
  padding: 0;
}

//立即注册  忘记密码

.btn {
  display: flex;
  justify-content: space-between;
  color: #999;
  cursor: pointer;
  margin-top: -10px;
}

.succes {
  background-color: #00cf8c;
  margin-left: 20px;
  cursor: pointer;
}

.btn {
  float: right;
  cursor: pointer;
}
</style>